import React, { useState, useEffect } from 'react'
import '../../../Orders/Order_management/Component/Css/Order.css'

import { UserOutlined } from '@ant-design/icons';


import { Button, Form, Input, Select, Space, DatePicker } from 'antd';

const { Option } = Select;
const { RangePicker } = DatePicker;


import { getbill } from '../../../../request/api'
export default function Reconciliation_title(props) {

    const { name, getTitle } = props



    let [After_sales_managementid, setAfter_sales_managementid] = useState('')
    let [_id, set_id] = useState('')
    let [goodsid, setgoodsid] = useState('')
    let [state, setstate] = useState('请选择订单状态')


    // 重置搜索
    const onFinish = async () => {
        setAfter_sales_managementid('')
        set_id('')
        setgoodsid('')
        setstate('请选择订单状态')
        const data: any = await getbill({})
        getTitle(data.data)
    }



    // 搜索
    const allorder: any = async () => {
        let from = {
            After_sales_managementid,
            _id,
            goodsid,
            state
        }
        const data: any = await getbill({ from })
        getTitle(data.data)
    }

    return (
        <div>
            <div className='Title'>
                <Input size="large" placeholder="请输入订单号" prefix='订单号：' value={goodsid} onChange={(e) => {
                    setgoodsid(e.target.value)
                }} className='user' />
                <Input size="large" placeholder="请输入订单流水" prefix='订单流水：' value={_id} onChange={(e) => {
                    set_id(e.target.value)
                }} className='user' />
                <Input size="large" placeholder="请输入退款订单" prefix='退款单号：' value={After_sales_managementid} onChange={(e) => {
                    setAfter_sales_managementid(e.target.value)
                }} className='user' />
                <Select
                    value={state}
                    onChange={(e) => { setstate(e) }}
                    className='Select'
                    placeholder="请选择订单状态"
                    allowClear
                >
                    <Option value="待确认">待确认</Option>
                    <Option value="已确认">已确认</Option>
                    <Option value="已冲正">已冲正</Option>

                </Select>

                <RangePicker showTime className='ShowTime' onChange={(e) => {
                    console.log(e);
                }} />
                <div >
                    <Button size="large" onClick={() => {
                        onFinish()
                    }}>重置</Button>
                    <Button size="large" onClick={() => {
                        allorder()
                    }
                    } >检索</Button>
                    <Button size="large" style={{ color: 'red', border: '1px solid red' }}>导出</Button>

                </div>
            </div>
        </div>
    )
}



